<template>
	<view class="user clearfix  hv100 ">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{typename[type]}}转换期权</block>
		</cu-custom>
		<view class="paylines"></view>
		<view class="flex flex-direction bg-white px15 ">
			<view class="py10">{{typename[type]}}转换期权</view>
			<view class="flex align-center justify-between py15">
				<input v-model="money" class="f14" type="number" :placeholder="'请输入需要转换的'+typename[type]+'数量'" />
				<text>{{typename[type]}}</text>
			</view>
			<view class="payline"></view>
			<view class="flex align-center justify-between py15 f12">
				<view class="flex align-center">
					<text>可用{{typename[type]}}</text>
					<text class="mx5"> {{balance}} {{typename[type]}}，</text>
					<text class="text-red" @click="money=balance">全部</text>
				</view>
				<!-- <text>转换比例 1益豆 ≈ {{radio}} 期权</text> -->
			</view>
			<view class="py10 ">可获得</view>
			<view class="flex align-center justify-between">
				<text class="text-red f26">{{shiMoney}}</text>
				<text>期权</text>
			</view>
			<!-- <view class="payline mt15"></view>
			<view class="py10 mt15">支付密码</view>
			<input v-model="paypwd" class="f14" password placeholder="请输入支付密码" />
			<view class="payline mt15"></view> -->
		</view>
		
		<view class="red-button discenter" @click="isqueren">确认</view>
		<!-- mask层 -->
		<view :class="['mask', show ? '' : 'visible']"></view>
		<!-- 密码 -->
		<view :class="['contents', show ? '' : 'contenthide']">
			<view class="title">
				<view class="close" @click="close()"><text class="cuIcon-close"></text></view>
				<view class="center">请输入支付密码</view>
				<view class="close"></view>
			</view>
			<view :class="['code', show ? '' : 'visible']">
				<view class="code-box">
					<block v-for="(item, index) in 6" :key="index">
						<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
					</block>
				</view>
				<!-- <input type="number" v-model="password" /> -->
			</view>			
		</view>
		<!-- 键盘 -->
		<view v-if="show" :class="['keyboard', show ? '' : 'active', isIphoneX ? 'isIphone' : '']">
			<block v-for="(item, index) in 9" :key="index">
				<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
			</block>
			<view class="keyboard-item hide"></view>
			<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
			<view class="keyboard-item delte" @tap="del()"><text class="cuIcon-delete"></text></view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			//支付密码
			show:false,
			isIphoneX:false,
			password:'',
			payPassword:'',
			
			money:'',
			radio:1,
			balance:'0.00',
			type:'',
			shouxufei:'0',
			typename:['','益豆','','分红','余利宝','拼团余额']
		}
	},
	onLoad(e) {
		this.type=e.type
		this.getData()
	},
	computed:{
		shiMoney(){
			if(this.money==''||this.money==0){
				return '0.00'
			}else{
				return (this.money*this.radio*(1-this.shouxufei*0.01)).toFixed(2)
			}
		}
	},
	onHide() {
		this.show=false
	},
	onBackPress() {
		this.show=false
	},
	methods: {
		isqueren(){
			if(this.money==''||this.money==0){
				uni.showToast({
					title:'请输入转换数量',
					icon:"none"
				})
				return false
			}else{
				this.show=true
			}
		},
		async getData() {
			if(this.type=='1'){
				let {
					data:{num,sxfBl,zhBl}
				} = await this.$http.post('wallet.yidouqiquanPage', {}, { tipConfig: { storeBlock: true } })
				this.balance=num
				// this.shouxufei=sxfBl
				this.radio=zhBl
			}
			if(this.type=='3'){
				let {
					data:{num,sxfBl,zhBl}
				} = await this.$http.post('wallet.fenhongqiquanPage', {}, { tipConfig: { storeBlock: true } })
				this.balance=num
				// this.shouxufei=sxfBl
				this.radio=zhBl 
			}
			if(this.type=='4'){
				let {
					data:{num,sxfBl,zhBl}
				} = await this.$http.post('wallet.yuliqiquanpage', {}, { tipConfig: { storeBlock: true } })
				this.balance=num
				// this.shouxufei=sxfBl
				this.radio=zhBl 
			}
		},
		async qiquan() {
			if(this.type=='1'){
				let params={
					ylbNum:this.money,
					payPassword:this.payPassword,
				}
				let {data} = await this.$http.post('wallet.yidouqiquan', params, { tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 } })
				this.show=false
			}
			if(this.type=='3'){
				let params={
					ylbNum:this.money,
					payPassword:this.payPassword,
				}
				let {data} = await this.$http.post('wallet.fenhongqiquan', params, { tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 } })
				this.show=false
			}
			if(this.type=='4'){
				let params={
					ylbNum:this.money,
					payPassword:this.payPassword,
				}
				let {data} = await this.$http.post('wallet.yuliqiquansure', params, { tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 } })
				this.show=false
			}
		},
		key(key) {
			if (this.password.length < 6) {
				this.password += key;
				if (this.password.length == 6) {
					this.payPassword=this.password
					this.qiquan()
				}
			}
		},
		clear() {
			this.password = '';
		},
		close() {
			this.password = '';
			this.trantision = false;
			this.show=false
		},
		del() {
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1);
			}
		}
	}
}
</script>

<style lang="less">
page{
	background-color: #FFFFFF;
}
.payline{
	width: 100%;
	height: 2rpx;
	background-color: #F2F2F2;
}
.paylines{
	width: 100%;
	height: 10rpx;
	background-color: #F2F2F2;
}
.red-button{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 90rpx;
	border-radius: 10rpx;
	background-color: #D73329;
	color: #FFFFFF;
	margin-top:80rpx ;
}
</style>
